<template>
    <div class="home">
        <Nav></Nav>
        <Nav2></Nav2>
        <br>
        <Banner class="nav"></Banner>
        <div class="box">
            <div class="container">
                <div class="row" v-for="category in category_list" :key="category.pk">
                    <div class="title"><h4>{{category.name}}</h4></div>
                    <div class="product" v-for="product in category.product_list">
                        <img :src="base_url+product.cover" alt="" class="image">
                        <h4 class=desc>{{ product.title}}</h4>
                        <h5 class=desc style="color: #79747d">{{ product.desc}}</h5>
                        <span class="money">¥{{product.price}} /人</span>
                        <hr>
                    </div>
                </div>



            </div>
            <Chat></Chat>
            <Foot></Foot>
        </div>

    </div>
</template>

<script>
    // @ is an alias to /src
    import Nav from '../components/Nav'
    import Banner from '../components/Banner'
    import Nav2 from '../components/Nav2'
    import Chat from '../components/Chat'
    import Foot from '../components/Foot'

    export default {
        name: 'home',
        components: {
            Nav, Banner, Nav2,Chat,Foot
        },
        data(){
            return{
                category_list:'',
                base_url :this.$settings.base_url+'/media/'
            }
        },
        created(){
            this.$axios({
                url:this.$settings.base_url+'/home/product_list'

            }).then(response =>{
                this.category_list = response.data;
            })
        }
    }
</script>

<style scoped>
    .title {
        height: 50px;
    }

    h4 {
        margin-top: 25px;
    }

    .product {
        width: 335px;
        height: 315px;
        background: white;
        display: inline-block;
        margin-left: 50px;
    }

    .desc {
        display: block;
        text-align: center;
        cursor: pointer;
    }

    .image {
        width: 335px;
        height: 220px;
        display: block;
         border-radius: 8px;
        cursor: pointer;
    }
    .money{
        color: #ff2b8a;
         display: block;
         text-align: center;
        margin-bottom: 10px;
        cursor: pointer;

    }
</style>
